<template>
    <div>
        <div class="welcome_field">
           
        </div>
        <h1>OVERVIEW</h1>
        <div class="overview_field"> 
              
            <el-card>
                <div class="title">
                    <h1>24</h1>
                    <div class="round">
                        <i class="el-icon-s-shop"></i>
                    </div>
                </div>
                <span>已上架商品数</span>
                
            </el-card>
            <el-card>
                <div class="title">
                    <h1>12</h1>
                    <div class="round">
                        <i class="el-icon-s-order"></i>
                    </div>
                </div>
                <span>本月订单</span>
            </el-card>
            <el-card>
                <div class="title">
                <h1>￥180</h1>
                <div class="round">
                        <i class="el-icon-s-data"></i>
                    </div>
                </div>
                <span>本月营业额</span>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.welcome_field
{
    margin-left:15%;
    h1{
        color: gray;
        font-size: 60px;
    }
}
.overview_field{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-card{
        width:300px;
        height:160px;
        border-radius: 20px;
        .title
        {
            display: flex;
            width:200px;
            h1{
            color: #67819c;
            margin-top:0;
            font-size:40px;      
            }
            .round
            {
                width:50px;
                height:50px;
                
                i{
                    font-size: 40px;
                    line-height: 50px;
                    float: right;
                }
            }
        }
       
        span{
            color: gray;
            
        }
        
    }
}
</style>